<template>
  <div class="header">
     <div class="left">
      <p style="height: 100%;"><img :src="user.head_img || userHead"
             alt
             v-imgField></p>
    </div>
    <div class="upupt">
      {{user.true_name}}
    </div>
    <div class="upupt">
      <img v-if="user.account_level_id==1"
           style="width: 2rem;"
           src="http://img.zanjl.com/Content/img/image/VIPPT.png">
      <img v-if="user.account_level_id==2"
           style="width: 2rem;"
           src="http://img.zanjl.com/Content/img/image/VIPCZ.png">
      <img v-if="user.account_level_id==3"
           style="width: 2rem;"
           src="http://img.zanjl.com/Content/img/image/VIPCJ.png">
      <img v-if="user.account_level_id==4"
           style="width: 2rem;"
           src="http://img.zanjl.com/Content/img/image/VIPZJ.png">
      <img v-if="user.account_level_id==5"
           style="width: 2rem;"
           src="http://img.zanjl.com/Content/img/image/VIPGJ.png">
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
export default{
  data () {
    return {
      userHead: 'http://img.zanjl.com/Content/img/image/user_head.png'
    }
  },
  computed: {
    ...mapState(['token', 'user'])
  }
}
</script>

<style lang="scss" scoped>
@import "../../../assets/css/pub";
.header {
  height: 8rem;
  background-image: url("http://img.zanjl.com/Content/img/image/upbackgroundt.png");
  background-size: cover;
  padding-top: 8%;
  text-align: center;
  .upupt {
    padding-top: 0.4rem;
    color: #ffffff;
    font-weight: 700;
  }
  .left {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    margin: 0 auto;
    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }
}</style>
